import * as React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { getHeaderTitle } from '@react-navigation/elements';
import { Home, Person, userInfo } from "../pages/index";
import MyTabs from "./BottomNavigator";
import { Nav } from "../components/index";
const Stack = createNativeStackNavigator();
// 自定义堆栈导航
function MyStack() {
  return (
    <Stack.Navigator
      headerMode='screen'
    >
      <Stack.Group
        screenOptions={{ headerShown: false, }}//隐藏导航栏
      >
        <Stack.Screen name="底部导航栏" component={MyTabs} />
      </Stack.Group>
      <Stack.Group
        screenOptions={{
          header: ({ navigation, route, options, back }) => {//设置自定义导航栏
            const title = getHeaderTitle(options, route.name);
            return (
              <Nav //引入自定义导航栏组件
                title={title}
                navigation={navigation}
                route={route}
                options={options}
                back={back}
                style={options.headerStyle} />
            );
          }
        }}  >
        <Stack.Screen name="Home" component={Home} options={{ title: '首页' }} />
        <Stack.Screen name="Person" component={Person} options={{ title: '个人中心' }} />
        <Stack.Screen name="UserInfo" component={userInfo} options={{ title: '用户详情' }} />
      </Stack.Group>
    </Stack.Navigator>
  );
}

export default MyStack;